import React, {Component} from "react";
import {observer,inject} from "mobx-react";
import {computed} from "mobx";

import {View} from "../component/index.jsx";
import {Modal,Select,Input,Button,Table,Switch,Image} from "antd";
import {
  DeleteOutlined,
  EditOutlined,
  UserAddOutlined,
} from '@ant-design/icons';


const { Option } = Select;
const { Search } = Input;

const style={ 
  formItem:{
    marginBottom:10,
    alignItems:"center"
  }
};


// 用户管理
@inject(["store"])
@observer
class User extends Component{
  constructor(props){
    super(props);
    this.store = this.props.store;
    this.user = this.props.store.storeUser;
    // 列表表格
    this.columns = [
      {width:"10%",title: "用户编号",dataIndex: "id"},
      {width:"10%",title: "头像",dataIndex: "header",render:text=>(text?<Image src={text} style={{width:30,height:30}} />:<span>无</span>)},
      {width:"20%",title: "用户名",dataIndex: "uname"},
      {width:"20%",title: "学生认证",dataIndex: "isStudent",render:text=><span>{text==1?"是":"否"}</span>},
      {width:"20%",title: "手机号码",dataIndex: "phone"},
      {
        width:"20%",
        title: "相关操作",
        key: "form",
        render: (text ,record)=> {
          const obj = record;
          return (
            <div>
              <Button
                onClick={()=>this.user.modal("update",obj)}
                icon={<EditOutlined />} style={{marginRight:10}} 
                shape="circle"
                title="编辑"
              />
              <Button
                onClick={()=>this.user.delete(obj)}
                icon={<DeleteOutlined />}
                type="danger"
                shape="circle"
                title="删除"
              />
            </div>
          );
        }
      },
    ];
    // 初次执行
    if(!this.data){this.user.init();}
  }
  componentDidMount(){
    this.store.navigation({page:"User"});
  }
  // 返回数据
  @computed get height() {return this.store.height;}
  // 返回数据
  @computed get data() {return this.user.paging.data;}
  // 分页状态
  @computed get loading() {return this.user.loading;}
  // 操作
  @computed get form() {return this.user.form;}
  // 查询
  @computed get where() {return this.user.where;}
  // 分页
  @computed get pagination(){
    return {current:Number(this.user.paging.nowPage),total:Number(this.user.paging.maxNum),pageSize:Number(this.user.paging.num)};
  }
  render(){
    const title = <div>{this.form.title} <span style={{color:"red"}}>{this.form.tip}</span></div>;
    return(
      <View style={{overflow:"hidden",height:this.height-50,width:"100%"}}>
        <div style={{flex:1,overflow:"hidden",height:this.height-50,padding:"0 5px"}}>
          <View 
            style={{
              borderBottom:"1px #eee solid",
              height:50,
              alignItems:"center",
              background:"#f2f2f2"
            }}
            >
            <Select
              defaultValue="uname"
              onChange={v=>this.user.set("where-field",v)}
              style={{width:"100px",margin:"0 5px"}}
            >
              <Option value="uname">用户名称</Option>
              <Option value="phone">用户编号</Option>
              <Option value="createtime">电话号码</Option>
            </Select>
            <Select
              defaultValue="="
              onChange={v=>this.user.set("where-condition",v)}
              style={{width:100,margin:"0 5px"}}
            >
              <Option value="=">等于查询</Option>
              <Option value="like">模糊查询</Option>
            </Select>
            <Search
              placeholder="输入查询内容"
              onSearch={value => this.user.find(value)}
              style={{ width: 250 }}
              value={this.where.value}
              onChange={(e)=>this.user.set("where-value",e.target.value)}
              enterButton
            />

            <Button onClick={()=>this.user.all()}  style={{margin:"0 5px 0 20px"}}>所有用户</Button>
            <Button onClick={()=>this.user.modal("insert",{})} icon={<UserAddOutlined />} type="primary" style={{margin:"0 5px"}}>添加用户</Button>
          </View>

          <Table
            scroll={{y:this.height-190,x:"100%"}}
            loading={this.loading}
            rowKey={record => record.id}
            columns={this.columns}
            dataSource={this.data.slice(0)}
            pagination={this.pagination}
            onChange={pagination=>this.user.page(pagination.current)}
          />
          <Modal
            maskClosable={false}
            visible={this.form.visible}
            title={title}
            // onOk={()=>this.user.submit()}
            onCancel={()=>this.user.set("form-visible",false)}
            footer={[
              <Button key="colse" onClick={()=>this.user.set("form-visible",false)}>关闭</Button>,
              <Button key="submit" type="primary" loading={this.form.loading} onClick={()=>this.user.submit()}>保存</Button>,
            ]}
            >
            <View style={style.formItem}>
              <label>用户名称：</label>
              <Input placeholder="3~20个字符" style={{flex:1}} value={this.form.data.uname} onChange={(e)=>this.user.change(e,"form-data-uname")} />
            </View>
            <View style={style.formItem}>
              <label>用户密码：</label>
              <Input type="password" placeholder="6个字符以上" style={{flex:1}} value={this.form.data.pwd} onChange={(e)=>this.user.change(e,"form-data-pwd")} />
            </View>

            <View style={style.formItem}><label>真实姓名：</label>
              <Input
                style={{flex:1}}
                value={this.form.data.name}
                onChange={(e)=>this.user.change(e,"form-data-name")}
              />
            </View>
            <View style={style.formItem}><label>电话号码：</label>
              <Input
                style={{flex:1}}
                value={this.form.data.phone}
                onChange={(e)=>this.user.change(e,"form-data-phone")}
              />
            </View>
            <View style={style.formItem}>
              <label>支付宝ID：</label>
              <Input
                style={{flex:1}}
                value={this.form.data.zfbUserId}
                onChange={(e)=>this.user.change(e,"form-data-zfbUserId")}
              />
            </View>
          </Modal>

        </div>
      </View>
    );
  }
}

export default User;